<!DOCTYPE html> 
<html> 
<head> 
  <title>Lotame Demo</title> 
  <meta name="viewport" content="initial-scale=1.0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link rel="stylesheet" href="jquery.mobile-1.2.0.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
  <script type="text/javascript">
	$(document).ready(function() {
		$('#sort').change(function() {
			var myswitch = $(this);
			var sort     = myswitch[0].selectedIndex == 1 ? true:false;
			
			if(sort) {
				$("#audGrid").load('sort.php');
			} else {
				$("#audGrid").load('list.php');
			}
		});
	});
  </script>
</head> 
<body> 
<div data-role="page">

  <div data-role="header" data-position="fixed">
	<h1>Lotame Demo</h1>
  </div><!-- /header -->

<div data-role="content"> 
    <h1>Audience Statistics</h1>
	<label for="sort">Sort By:</label>
    <select name="sort" id="sort" data-role="slider">
      <option value="off" selected="selected">Views</option>
      <option value="on">Name</option>
    </select> 
	<br/>
	<br/>
	<div class="ui-grid-c" id="audGrid">
		<?php include('list.php'); ?>
	</div><!-- /grid-c -->

  </div><!-- /content -->

  <div data-role="footer" data-position="fixed">
  </div>

</div><!-- /page -->

</body>
</html>
